<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <search  :config="searchConfig" @search="search"/>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" @click="handleAdd" draggable="true">新增</a-button>
      <a-button type="primary" >删除</a-button>
      <a-button type="primary" >启用</a-button>
      <a-button type="primary" >禁用</a-button>
    </div>
    <!-- table区域-begin -->
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      class="Table j-table-force-nowrap"
      :loading="loading"
      :customRow="onClickRow"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      @change="handleTableChange">

                <span slot="action" slot-scope="text, record">
                  <a @click="handleEdit(record)">编辑</a>
                  <a-divider type="vertical" />
                  <a-dropdown>
                    <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
                    <a-menu slot="overlay">
                      <a-menu-item>
                        <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                          <a>删除</a>
                        </a-popconfirm>
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </span>

    </a-table>
    <template-add ref="modalForm"></template-add>

  </a-card>
</template>

<script>
import { PageListMixin } from '@/mixins/PageListMixin'
import { getAction, postAction } from '@api/manage'
import templateAdd from './modules/templateAdd'
export default {
  name: 'order',
  mixins:[PageListMixin],
  components: {
    templateAdd
  },
  data () {
    return {
      description: '促销模版',
      searchConfig:[ {
        type:'input',
        name:'terminalName',
        placeholder:'请输入模版编号',
      },{
        type:'input',
        name:'terminalName',
        placeholder:'请输入模版名称',
      },{
        type:'date-range',
        name:'date',
        range:['startDate','endDate'],
        placeholder:['有效期开始时间','有效期结束时间']
      }, {
        // label:'订单状态',
        type:'a-select',
        name:'status',
        option:[{
          name:'启用',
          value:'009'
        },{
          name:'停用',
          value:'003'
        }],
        placeholder:'请选择状态',
      },],
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },

        {
          title: '模板编号',
          align: 'center',
          dataIndex: 'a',
          // customRender: (r, t, index) => {
          //   let vm = this
          //   let child = vm.$createElement('a', {
          //     domProps: {
          //       innerHTML: '1234567898761'
          //     },
          //     on: {
          //       click: function() {
          //         vm.cityClick(t)
          //       }
          //     }
          //   })
          //   const obj = {
          //     children: child,
          //     attrs: {}
          //   }
          //   return obj
          // }
        },
        {
          title: '模板名称',
          align: "center",
          dataIndex: 'b'
        },
        {
          title: '开始时间',
          align: "center",
          dataIndex: 'c'
        },
        {
          title: '结束时间',
          align: "center",
          dataIndex: 'd',
        },
        {
          title: '备注',
          align: "center",
          dataIndex: 'i',
        },
        {
          title: '创建人',
          align: "center",
          dataIndex: 'e'
        },
        {
          title: '创建时间',
          align: "center",
          dataIndex: 'f'
        },
        {
          title: '更新人',
          align: "center",
          dataIndex: 'g'
        },
        {
          title: '更新时间',
          align: "center",
          dataIndex: 'h'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action'},
        }
      ],
      dataSource:[{
        a:'CX20060010001',
        b:'月返',
        c:'2022-03-03',
        d:'2022-03-03',
        e:'admin',
        f:'2020-06-01 14:00:00',
        g:'admin',
        h:'2020-06-01 14:00:00',
        i:'大润发',
        j:'SDF100',
        k:'上海郡汇',
        l:'',
        m:'',
        n:'',
        o:'',
        p:'',
        q:'',
        r:'',
        s:'',
        t:'',
        u:'',
        v:'',
        w:'',
        x:'',
        y:'',
        z:'',

      }],
      url: {
        // list: window._CONFIG['domianSfaURL']+ "/sfaSignController/findPageListStatement",
        exportXlsUrl: window._CONFIG['domianTpmURL']+"budget/tpmBudgetFee/exportXls",
      },
    }
  },
  created() {
    this.queryParam.doc='订货单'
  },
  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    }
  },
  methods: {

    handleChange(value) {
      console.log(`selected ${value}`);
    },

    search(queryParam){
      this.queryParam=queryParam
      this.loadData()
    },
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>